<template>
  <div>
    <Modal v-model="showAddr" width="800" :title="$t('recipientAddress')" :transfer="false" class-name=".ivu-modal-wrap"> 
      <Form
        :model="formData"
        ref="form"
        label-position="left"
        :label-width="100"
        :rules="ruleInline"
      >
        <FormItem :label="$t('recipient')" prop="name">
          <i-input v-model="formData.name" style="width: 600px"></i-input>
        </FormItem>
        <FormItem :label="$t('recipientRegion')" prop="address">
          {{ formData.address || $t("noAddress") }}
          <Button
            type="primary"
            style="margin-left: 10px"
            size="small"
            @click="$refs.map.open()"
            >{{ $t("select") }}</Button
          >
        </FormItem>
        <FormItem :label="'门牌号'" prop="detail">
          <i-input v-model="formData.detail" style="width: 600px"></i-input>
        </FormItem>
        <FormItem :label="$t('phoneNumber')" prop="mobile">
          <i-input v-model="formData.mobile" style="width: 600px"></i-input>
        </FormItem>
        <FormItem :label="$t('addressAlias')">
          <i-input
            v-model="formData.alias"
            length
            :maxlength="4"
            :placeholder="$t('pleaseEnter') + $t('addressAlias')"
            style="width: 600px"
          ></i-input>
        </FormItem>
        <FormItem :label="$t('defaultAddress')">
          <i-switch v-model="formData.isDefault" />
        </FormItem>
      </Form>
      <div class="mt_20" slot="footer">
        <Button @click="hide">{{ $t("cancel") }}</Button>
        <Button type="primary" class="mr_10" :loading="loading" @click="save">{{
          $t("save") + $t("deliveryAddress")
        }}</Button>
      </div>
    </Modal>
    <multipleMap ref="map" @callback="getAddress"></multipleMap>
  </div>
</template>

<script>
import multipleMap from "@/components/map/multiple-map";
import {
  newMemberAddress,
  editMemberAddress,
  getAddrDetail,
} from "@/api/address";
export default {
  name: "addressManage",
  props: {
    id: {
      // 传入的地址id
      defalut: "",
      type: String,
    },
  },
  data() {
    return {
      showAddr: false, // 控制模态框显隐
      formData: {
        // 表单数据
        isDefault: false,
      },
      ruleInline: {
        // 验证规则
        name: [
          {
            required: true,
            message: this.$t("pleaseEnter") + this.$t("recipient"),
            trigger: "blur",
          },
        ],
        address: [
          {
            required: true,
            message: this.$t("pleaseEnter") + this.$t("recipientAddress"),
            trigger: "change",
          },
        ],
        detail: [
          {
            required: true,
            message: this.$t("pleaseEnter") + this.$t("address"),
            trigger: "blur",
          },
        ],
        mobile: [
          {
            required: true,
            message: this.$t("pleaseEnter") + this.$t("phoneNumber"),
            trigger: "blur",
          },
        ],
      },
      loading: false, // 提交的加载状态
      mapMsg: {}, // 地图信息
    };
  },
  methods: {
    save() {
      // 保存地址
      this.$refs.form.validate((valid) => {
        if (valid) {
          const params = JSON.parse(JSON.stringify(this.formData));
          params.consigneeAddressPath = params.address.replace(/\s/g, ",");
          delete params.address;
          this.loading = true;
          if (this.id) {
            editMemberAddress(params)
              .then((res) => {
                this.loading = false;
                if (res.success) {
                  this.$Message.success(this.$t("succeed"));
                  this.$emit("change", true);
                  this.hide();
                }
              })
              .catch(() => {
                this.loading = false;
              });
          } else {
            newMemberAddress(params)
              .then((res) => {
                this.loading = false;
                if (res.success) {
                  this.$Message.success(this.$t("succeed"));
                  this.$emit("change", true);
                  this.hide();
                }
              })
              .catch(() => {
                this.loading = false;
              });
          }
        }
      });
    },
    getAddrById(id) {
      // 获取地址详情
      getAddrDetail(id).then((res) => {
        if (res.success) {
          console.log(res);
          const data = res.result;
          data.address = res.result.consigneeAddressPath.replace(/,/g, " ");
          this.formData = data;
        }
      });
    },
    getAddress(val) {
      // 获取地图选择信息
      if (val.type === "select") {
        const paths = val.data.map((item) => item.name).join(",");
        const ids = val.data.map((item) => item.id).join(",");
        this.$set(this.formData, "address", paths);
        this.$set(this.formData, "consigneeAddressIdPath", ids);
        const coord = val.data[val.data.length - 1].center.split(",");
        this.formData.lat = coord[1];
        this.formData.lon = coord[0];
      } else {
        this.$set(this.formData, "address", val.data.addr);
        this.$set(this.formData, "consigneeAddressIdPath", val.data.addrId);
        this.$set(this.formData, "detail", val.data.address);
        this.formData.lat = val.data.position.lat;
        this.formData.lon = val.data.position.lng;
      }
    },
    show() {
      // 地址模态框显示
      this.showAddr = true;
    },
    hide() {
      // 地址模态框隐藏
      this.showAddr = false;
    },
  },
  watch: {
    id: {
      // 传入的地址id
      handler: function (v) {
        if (v) {
          this.getAddrById(v);
        } else {
          this.formData = { isDefault: false };
          this.$refs.form.resetFields();
        }
      },
    },
  },
  components: {
    multipleMap,
  },
};
</script>

<style scoped lang="scss">
.add-box {
  margin: 40px 0;
}
.ivu-modal-wrap {
  z-index: 997 !important;
}
.ivu-modal-mask {
  z-index: 996 !important;
}
</style>
